<template>
	<div class="echart-wrap">
		<div class="chart-container">
			<div class="title">期现业务(不含非标)日均成交额(亿元)</div>
			<div id="turnoverSumamaryChart" class="chart"></div>
			<div class="title">基差业务日均成交额(亿元)</div>
			<div id="turnoverBasisChart" class="chart"></div>
			<div class="title">标仓业务日均成交额(亿元)</div>
			<div id="turnoverWbillChart" class="chart"></div>

			<div class="title">期现业务(不含非标)日均成交量(万吨)</div>
			<div id="volumeSumamaryChart" class="chart"></div>
			<div class="title">基差业务日均成交量(万吨)</div>
			<div id="volumeBasisChart" class="chart"></div>
			<div class="title">标仓业务日均成交量(万吨)</div>
			<div id="volumeWbillChart" class="chart"></div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "DailyYearChart",
		props: {
			reportData: {
				type: Object,
				default () {
					return {};
				},
			},
			todayDate: {
				type: String,
				default () {
					return "";
				},
			},
			lastyear: {
				type: String,
				default () {
					return this.todayDate.substring(0,4)-1 + '年';
				},
			},
			thisyear: {
				type: String,
				default () {
					return this.todayDate.substring(0,4)+'年'+parseInt(this.todayDate.substring(5, 7))+'月以来';
				},
			},
		},
		data() {
			return {
				turnoverSumamarOption: this.getChartOption(),
				turnoverWbillOption: this.getChartOption(),
				turnoverBasisOption: this.getChartOption(),
				volumeSumamarOption: this.getChartOption(),
				volumeWbillOption: this.getChartOption(),
				volumeBasisOption: this.getChartOption()
			};
		},
		mounted() {
			this.getTurnoverSumamary();
			this.getTurnoverWbill();
			this.getTurnoverBasis();
			this.getVolumeSumamary();
			this.getVolumeWbill();
			this.getVolumeBasis();
		},
		methods: {
			getChartOption() {
				return {
					grid:{    
						left: '20%',
						top: 0,
						bottom: 20,
					},
					// X 轴
					xAxis: { 
						type: 'value',
						show: true,
						splitNumber: 3
					},
					// 显示Y轴
					yAxis: {    
						type: 'category',    
						data: [this.thisyear, this.lastyear]  
					},
					series: [{
						type: 'bar',
						label: {
							show: true,
							position: 'right'
						},
						barWidth: 20,
						markPoint: {
							symbolSize: 1,
							label: {
								formatter: '{b|{b}}',
								padding: [0, 30],
								position: 'right',
								distance: 20,
								rich: {}
							}, 
							data: [
								{ type: 'min', name: '' }
							]
						}
					}],
					color: ['#2f6eba'],
				}
			},
			getTurnoverSumamary() {
				this.turnoverSumamaryChart = this.$echart.init(
					document.getElementById("turnoverSumamaryChart")
				);
				let data = this.reportData.year_summary
				this.turnoverSumamarOption.series[0].data = [data.nonwbill.turnover, data.nonwbill.last_year_turnover]
				let diff = data.nonwbill.turnover_diff;
				let color = diff > 100 ? '#ea3323' : '#4ead5b';
				this.turnoverSumamarOption.series[0].markPoint.data[0].name = diff + '%';
				this.turnoverSumamarOption.series[0].markPoint.label.color = color;
				this.turnoverSumamaryChart.setOption(this.turnoverSumamarOption);
			},
			getTurnoverWbill() {
				this.turnoverWbillChart = this.$echart.init(
					document.getElementById("turnoverWbillChart")
				);
				let data = this.reportData.year_summary
				this.turnoverWbillOption.series[0].data = [data.wbill.turnover, data.wbill.last_year_turnover]
				let diff = data.wbill.turnover_diff;
				let color = diff > 100 ? '#ea3323' : '#4ead5b';
				this.turnoverWbillOption.series[0].markPoint.data[0].name = diff + '%';
				this.turnoverWbillOption.series[0].markPoint.label.color = color;
				this.turnoverWbillChart.setOption(this.turnoverWbillOption);
			},
			getTurnoverBasis() {
				this.turnoverBasisChart = this.$echart.init(
					document.getElementById("turnoverBasisChart")
				);
				let data = this.reportData.year_summary
				this.turnoverBasisOption.series[0].data = [data.basis.turnover, data.basis.last_year_turnover]
				let diff = data.basis.turnover_diff
				let color = diff > 100 ? '#ea3323' : '#4ead5b';
				this.turnoverBasisOption.series[0].markPoint.data[0].name = diff + '%';
				this.turnoverBasisOption.series[0].markPoint.label.color = color;
				this.turnoverBasisChart.setOption(this.turnoverBasisOption);
			},
			getVolumeSumamary() {
				this.volumeSumamaryChart = this.$echart.init(
					document.getElementById("volumeSumamaryChart")
				);
				let data = this.reportData.year_summary
				this.volumeSumamarOption.series[0].data = [data.nonwbill.volume, data.nonwbill.last_year_volume]
				let diff = data.nonwbill.volume_diff
				let color = diff > 100 ? '#ea3323' : '#4ead5b';
				this.volumeSumamarOption.series[0].markPoint.data[0].name = diff + '%';
				this.volumeSumamarOption.series[0].markPoint.label.color = color;
				this.volumeSumamaryChart.setOption(this.volumeSumamarOption);
			},
			getVolumeWbill() {
				this.volumeWbillChart = this.$echart.init(
					document.getElementById("volumeWbillChart")
				);
				let data = this.reportData.year_summary
				this.volumeWbillOption.series[0].data = [data.wbill.volume, data.wbill.last_year_volume]
				let diff = data.wbill.volume_diff
				let color = diff > 100 ? '#ea3323' : '#4ead5b';
				this.volumeWbillOption.series[0].markPoint.data[0].name = diff + '%';
				this.volumeWbillOption.series[0].markPoint.label.color = color;
				this.volumeWbillChart.setOption(this.volumeWbillOption);
			},
			getVolumeBasis() {
				this.volumeBasisChart = this.$echart.init(
					document.getElementById("volumeBasisChart")
				);
				let data = this.reportData.year_summary
				this.volumeBasisOption.series[0].data = [data.basis.volume, data.basis.last_year_volume]
				let diff = data.basis.volume_diff
				let color = diff > 100 ? '#ea3323' : '#4ead5b';
				this.volumeBasisOption.series[0].markPoint.data[0].name = diff + '%';
				this.volumeBasisOption.series[0].markPoint.label.color = color;
				this.volumeBasisChart.setOption(this.volumeBasisOption);
			}
		},
	};
</script>

<style lang="scss">
	.title {
		font-size: 16px;
		font-weight: 600;
		margin-bottom: 10px;
		text-align: center;
	}
	.echart-wrap {
		height: 900px;
		border: 3px solid #eeeeee;
		position: relative;
		margin-bottom: 20px;

		.chart-container {
			width: 100%;

			.chart {
				height: 100px;
				width: 510px;
				margin-bottom: 20px;
			}
		}
	}
</style>
